<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lib/18/react.development.js"></script>
  <script src="./lib/18/react-dom.development.js"></script>
  <script src="./lib/babel.min.js"></script>

</head>
<body>
  <div id="app"></div>
  <script type="text/babel"> /* 声明使用babel进行编译 jsx => js*/
  /* 
  条件渲染的2种情况
    ● 满足条件显示界面1，否则显示界面2
      1. if...else
      2. 三目表达式
    ● 只有满足条件才显示界面
     3. &&
  */
    let loading = false
    let vdom
    /* 需求1: 如果loading为真显示提示loading界面, 否则显示结果页面 */
    // 1. if...else
    if (loading) {
      vdom = <h2>正在加载中...</h2>
    } else {
      vdom = <p>结果页面</p>
    }
    // 2. 三目表达式
    vdom = loading ? <h2>正在加载中222...</h2> : <p>结果页面222</p>

    /* 需求2: 只有loading为真才显示界面 */
    // 3. &&
    vdom = loading && <h3>loading...</h3>


    ReactDOM.createRoot(document.getElementById('app')).render(vdom)

  </script>
</body>
</html>